<!DOCTYPE html>
<html lang="en">

	<head>
	
		<!-- Basic -->
    	<meta charset="UTF-8" />

		<title>Lockscreen | Nadhif - Responsive Admin Template</title>
		
		<!-- Mobile Metas -->
	    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		
		<!-- Import google fonts -->
        <link href="http://fonts.useso.com/css?family=Open+Sans:300,400,600,700,800|Shadows+Into+Light" rel="stylesheet" type="text/css" />
        
		<!-- Favicon and touch icons -->
		<link rel="shortcut icon" href="../static/ico/favicon.ico" type="image/x-icon" />
		<link rel="apple-touch-icon" href="../static/ico/apple-touch-icon.png" />
		<link rel="apple-touch-icon" sizes="57x57" href="../static/ico/apple-touch-icon-57x57.png" />
		<link rel="apple-touch-icon" sizes="72x72" href="../static/ico/apple-touch-icon-72x72.png" />
		<link rel="apple-touch-icon" sizes="76x76" href="../static/ico/apple-touch-icon-76x76.png" />
		<link rel="apple-touch-icon" sizes="114x114" href="../static/ico/apple-touch-icon-114x114.png" />
		<link rel="apple-touch-icon" sizes="120x120" href="../static/ico/apple-touch-icon-120x120.png" />
		<link rel="apple-touch-icon" sizes="144x144" href="../static/ico/apple-touch-icon-144x144.png" />
		<link rel="apple-touch-icon" sizes="152x152" href="../static/ico/apple-touch-icon-152x152.png" />
		
	    <!-- start: CSS file-->
		
		<!-- Vendor CSS-->
		<link href="../static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
		<link href="../static/vendor/skycons/css/skycons.css" rel="stylesheet" />
		<link href="../static/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
		
		<!-- Plugins CSS-->
		<link href="../static/plugins/bootkit/css/bootkit.css" rel="stylesheet" />
		
		<!-- Theme CSS -->
		<link href="../static/css/jquery.mmenu.css" rel="stylesheet" />
		
		<!-- Page CSS -->		
		<link href="../static/css/style.css" rel="stylesheet" />
		<link href="../static/css/add-ons.min.css" rel="stylesheet" />
		
		<style>
			footer {
				display: none;
			}
		</style>
		
		<!-- end: CSS file-->	
	    
		
		<!-- Head Libs -->
		<script src="../static/plugins/modernizr/js/modernizr.js"></script>
		
		<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
			<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
			<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
		<![endif]-->		
		
	</head>

	<body>
		<!-- Start: Content -->
		<div class="container-fluid content">
			<div class="row">
				<!-- Main Page -->
				<div class="body-locked">
					<div class="center-locked">
						<div class="panel bk-border-off panel-locked">
							<div class="panel-body">
								<div class="bk-fg-info bk-fg-darken text-center">
									<img src="../static/img/avatar1.jpg" alt="" class="img-circle bk-img-120 bk-border-white bk-border-darken bk-border-3x bk-margin-top-10 bk-margin-bottom-10" />
								</div>								
							</div>
							<div class="panel-body bk-bg-primary bk-border-primary bk-padding-left-30 bk-padding-right-30 text-center bk-noradius">
								<h3 class="bk-margin-off"><strong>Jhon Smith Doe</strong></h3>							
								<div class="bk-padding-bottom-30 bk-padding-top-10">
									<p>jhonsmith@mail.com</p>
								</div>
								<div class="form-group">
									<div class="input-group input-group-icon">
										<input id="prependedInput" class="form-control bk-noradius" size="16" type="password" placeholder="Enter your password" />
										<span class="input-group-addon">
											<span class="icon icon-lg">
												<i class="fa fa-lock"></i>
											</span>
										</span>
									</div>
								</div>
								<span class="help-block text-left">
									<a href="#">
										<small>Forgot password ?</small>
									</a>
								</span>									
								<div class="pull-right">
									<a href="index.html">				
										<button type="button" class="btn btn-primary">Unlock</button>
									</a>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- End Main Page -->
		
				<!-- Usage -->
				<div id="usage-blank">
					<ul>
						<li>
							<div class="title">Memory</div>
							<div class="bar">
								<div class="progress progress-md  progress-striped active">
									<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%"></div>
								</div>
							</div>			
							<div class="desc">4GB of 8GB</div>
						</li>
						<li>
							<div class="title">HDD</div>
							<div class="bar">
								<div class="progress progress-md  progress-striped active">
									<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"></div>
								</div>
							</div>			
							<div class="desc">250GB of 1TB</div>
						</li>
						<li>
							<div class="title">SSD</div>
							<div class="bar">
								<div class="progress progress-md  progress-striped active">
									<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%"></div>
								</div>
							</div>			
							<div class="desc">700GB of 1TB</div>
						</li>
						<li>
							<div class="title">Bandwidth</div>
							<div class="bar">
								<div class="progress progress-md  progress-striped active">
									<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%"></div>
								</div>
							</div>			
							<div class="desc">90TB of 100TB</div>
						</li>				
					</ul>	
				</div>
				<!-- End Usage -->					
		
			</div>
		</div><!--/container-->
		
		
		<!-- start: JavaScript-->
		
		<!-- Vendor JS-->				
		<script src="../static/vendor/js/jquery.min.js"></script>
		<script src="../static/vendor/js/jquery-2.1.1.min.js"></script>
		<script src="../static/vendor/js/jquery-migrate-1.2.1.min.js"></script>
		<script src="../static/vendor/bootstrap/js/bootstrap.min.js"></script>
		<script src="../static/vendor/skycons/js/skycons.js"></script>
		
		<!-- Plugins JS-->
		<script src="../static/plugins/bootkit/js/bootkit.js"></script>
		
		<!-- Theme JS -->		
		<script src="../static/js/jquery.mmenu.min.js"></script>
		<script src="../static/js/core.min.js"></script>
		
		<!-- Pages JS -->
		<script src="../static/js/pages/page-lockscreen.js"></script>
		
		<!-- end: JavaScript-->
		
	</body>
	
</html>